<template>
    <div>
         <el-breadcrumb separator-class="el-icon-arrow-right">
            <el-breadcrumb-item :to="{ path: '/SystemHomePage' }">首页</el-breadcrumb-item>
            <el-breadcrumb-item>搜索功能</el-breadcrumb-item>
            <el-breadcrumb-item>搜索框</el-breadcrumb-item>
        </el-breadcrumb>
         <el-card>
             <!-- 搜索框 -->
             <el-input placeholder="请输入内容" v-model="input1">
                 <el-button slot="append" icon="el-icon-search" ></el-button>
            </el-input>

            <el-row>
            <el-col :span="10" v-for="(o, index) in 2" :key="o" :offset="index > 0 ? 2 : 0">
                <el-card :body-style="{ padding: '0px' }">
                    <img src="../../assets/img/searchImg1.jpg" class="image">
                    <div style="padding: 14px;">
                        <span>热门房屋</span>
                        <div class="bottom clearfix">
                        <time class="time">{{ currentDate }}</time>
                        <el-button type="text" class="button">操作按钮</el-button>
                        </div>
                    </div>
                </el-card>
            </el-col>
            </el-row>
        </el-card>
    </div>
</template>
<script>
   export default {
    data() {
        return {
            input1: '',
            currentDate: new Date()
        }
    }
  }
</script>
<style scoped>
    .el-row{
        margin-top: 5%;
        margin-left: 8%;
    }
    .el-row .el-col img{
        height: 300px;
    }
   .time {
    font-size: 13px;
    color: #999;
  }
  
  .bottom {
    margin-top: 13px;
    line-height: 12px;
  }

  .button {
    padding: 0;
    float: right;
  }

  .image {
    width: 100%;
    display: block;
  }

  .clearfix:before,
  .clearfix:after {
      display: table;
      content: "";
  }
  
  .clearfix:after {
      clear: both
  }
</style>